<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
  <head>
    {% block head %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Newspipe - A web news reader." />
    <meta name="author" content="" />
    <title>Newspipe{% if head_titles %} - {{ ' - '.join(head_titles) }}{% endif %}</title>
    <link rel="shortcut icon" href="{{ url_for("static", filename="img/favicon.ico") }}" />
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='npm_components/bootstrap/dist/css/bootstrap.min.css') }}" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='npm_components/fork-awesome/css/fork-awesome.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/theme.css') }}" />
    <!-- JavaScript -->
    <script type="text/javascript" src="{{ url_for('static', filename='npm_components/@popperjs/core/dist/umd/popper.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='npm_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
    {% endblock %}
  </head>
  <body>
    {% block menu %}
    <nav class="navbar navbar-expand-lg ">
       <div class="container-fluid">
        <a class="navbar-brand" href="{{ prefix() }}/">Newspipe</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        {% block menu_links %}
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav mr-auto w-100 justify-content-center">
                <li class="nav-item">
                {% block messages %}
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{category}} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <a type="button" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></a>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                {% endblock %}
                </li>
            </ul>

            <ul class="navbar-nav mr-auto w-100 justify-content-end">
                {% if current_user.is_authenticated %}
                    {% if current_user.is_admin %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('fetch') }}" title="{{  _('Fetch') }}"><i class="fa fa-download" aria-hidden="true"></i>&nbsp;{{  _('Fetch') }}</a>
                        </li>
                    {% endif %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownRSS" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-rss" aria-hidden="true"></i>&nbsp;{{ _('Feeds') }}</a>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownRSS" style="min-width: 300px;">
                              <a class="dropdown-item" href="{{ url_for('feeds.feeds') }}">{{ _('Feeds') }}</a>
                              <a class="dropdown-item" href="{{ url_for('feeds.inactives') }}">{{ _('Inactive') }}</a>
                              <a class="dropdown-item" href="{{ url_for('popular') }}">{{ _('Popular') }}</a>
                              <a class="dropdown-item" href="{{ url_for('articles.history') }}">{{ _('History') }}</a>
                              <div class="dropdown-divider"></div>
                              <a class="dropdown-item" href="{{ url_for('feed.form') }}">{{ _('Add a new feed') }}</a>
                              <form class="px-4 py-3" action="{{ url_for('feed.bookmarklet') }}">
                                <div class="input-group">
                                      <label class="sr-only" for="inlineFormInputGroupAPIKey">{{ _('Add a new feed') }}</label>
                                      <input class="form-control" name="url" type="url" placeholder="{{_('Site or feed url')}}" required="required"/>
                                      <button type="submit" class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i></button>
                                 </div>
                              </form>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCategory" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-tag" aria-hidden="true"></i>&nbsp;{{ _('Categories') }}</a>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownCategory" style="min-width: 250px;">
                            <a class="dropdown-item" href="{{ url_for('categories.list_') }}">{{ _('Categories') }}</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{{ url_for('category.form') }}">{{ _('Add a new category') }}</a>
                            <form class="px-4 py-3" action="{{ url_for('category.form') }}" method="POST" name="category">
                                <label class="sr-only" for="inlineFormInputGroupAPIKey">{{ _('Add a new category') }}</label>
                                <div class="input-group">
                                    <input class="form-control" name="name" type="text" placeholder="{{_('Category name')}}" required="required"/>
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i></button>
                                </div>
                            </form>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBookmark" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-bookmark" aria-hidden="true"></i>&nbsp;{{ _('Bookmarks') }}</a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBookmark">
                            <li><a class="dropdown-item" href="{{ url_for('bookmarks.list_') }}">{{ _('Bookmarks') }}</a></li>
                            <li><a class="dropdown-item" href="{{ url_for('bookmark.form') }}">{{ _('Add a new bookmark') }}</a></li>
                        </ul>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownSearch" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-search" aria-hidden="true"></i></i>&nbsp;{{ _('Search') }}</a>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownSearch">
                            <form class="px-4 py-3" action="{{ url_for('home') }}" method="GET">
                                <div class="mb-3">
                                    <input class="form-control" name="query" type="text" placeholder="{{_('Query')}}" required="required"/>
                                </div>
                                <div class="mb-3">
                                    <input type="checkbox" class="form-check-input" id="checkTitle" name="search_title" checked>
                                    <label class="form-check-label" for="checkTitle">Search in title</label>
                                </div>
                                <div class="mb-3">
                                    <input type="checkbox" class="form-check-input" id="checkContent" name="search_content">
                                    <label class="form-check-label" for="checkContent">Search in content</label>
                                </div>
                                <button type="submit" class="btn btn-primary">OK</button>
                            </form>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownUser" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-user" aria-hidden="true"></i></a>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownUser">
                            <a class="dropdown-item" href="{{ url_for('user.profile') }}">{{ _('Profile') }}</a>
                            <a class="dropdown-item" href="{{ url_for('user.management') }}">{{ _('Your data') }}</a>
                            <a class="dropdown-item" href="#" id="btnThemeSwitch">Light theme</a>
                            {% if current_user.is_admin %}
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{{ url_for('admin.dashboard') }}">{{ _('Dashboard') }}</a>
                                <div class="dropdown-divider"></div>
                            {% endif %}
                            <a class="dropdown-item" href="{{ url_for('about') }}">{{ _('About') }}</a>
                            <a class="dropdown-item" href="{{ url_for('logout') }}" title="{{ _('Logout') }}">Logout</a>
                        </div>
                    </li>
                {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('bookmarks.list_') }}" title="{{  _('Recent bookmarks') }}">{{  _('Recent bookmarks') }}</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="{{ url_for('popular') }}" title="{{  _('Popular feeds') }}">{{  _('Popular feeds') }}</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="{{ url_for('about') }}" title="{{  _('About') }}">{{  _('About') }}</a>
                   </li>
                {% endif %}
            </ul>
        </div>
        {% endblock %}
      </div>
    </nav>
    {% endblock %}

    {% block content %}{% endblock %}

    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/config.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/articles.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/feed.js') }}"></script>
    <script>
      function getCookie(name) {
          var nameEQ = name + "=";
          var ca = document.cookie.split(';');
          for(var i=0;i < ca.length;i++) {
              var c = ca[i];
              while (c.charAt(0)==' ') c = c.substring(1,c.length);
              if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
          }
          return null;
      }

      if (getCookie("theme") == null) {
          document.cookie = "theme=dark; path=/";
      }
      document.documentElement.setAttribute('data-bs-theme', getCookie("theme"));
      document.getElementById('btnThemeSwitch').textContent = (getCookie("theme") == 'dark' ? 'Light' : 'Dark').concat(' theme');

      document.addEventListener("DOMContentLoaded", function() {
          document.getElementById('btnThemeSwitch').addEventListener('click',()=>{
              if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
                  document.documentElement.setAttribute('data-bs-theme','light')
                  document.getElementById('btnThemeSwitch').textContent = 'Dark theme';
                  document.cookie = "theme=light; path=/";
              }
              else {
                  document.documentElement.setAttribute('data-bs-theme','dark');
                  document.getElementById('btnThemeSwitch').textContent = 'Light theme';
                  document.cookie = "theme=dark; path=/";
              }
          })
      });
  </script>
  </body>
</html>
